Vue.js: 列表渲染 v |
您所在的位置：网站首页 › v-for key › Vue.js: 列表渲染 v |
Vue.js: 列表渲染 v
|
Vue.js: 列表渲染 v-for
27 Apr 2017
vue.js
vue.js directives
v-for
使用 v-for 迭代陣列或物件中的元素。 例 1：陣列使用 v-for 迭代陣列中的元素。如下所示，list 是一個陣列，item 代表用於迭代的元素，使用 item.id 或 item.name 可帶出屬性。其中第二個參數 index 是索引值 (optional)。 index: ${ index }, name: ${ item.name } var vm = new Vue({ el: '#app', delimiters: ['${', '}'], data: { list: [ { id: '123456789', name: '選項 1' }, { id: '234567890', name: '選項 2' }, { id: '345678901', name: '選項 3' }, ], }, }); // 由於部落格會把使用雙花括號的內容吃掉，所以設定 delimiters 以顯示完整程式碼。渲染結果如下。
使用 v-for 迭代物件中的元素。第二個參數 key 是鍵值，第三個參數 index 是索引值，皆為 optional。 index: ${ index }, key: ${ key }, name: ${ item.name } var vm = new Vue({ el: '#app', delimiters: ['${', '}'], data: { list: { '123456789': { name: '選項 1' }, '234567890': { name: '選項 2' }, '345678901': { name: '選項 3' }, }, }, });渲染結果如下。
渲染結果如下。
使用 標籤。 index: ${ index }, name: ${ item.name } 例 5：元件 Component可參考 Todo List 的 HTML 部份 和 JavaScript 部份。 key由於效能考量，在預設的狀況下，Vue.js 會儘量重覆使用已渲染好的元素。 若不設定 key 值，不會重新渲染元素，只會部份更新。 ${ index } var vm = new Vue({ el: '#app', delimiters: ['${', '}'], data: { list: [ { id: '123456789', name: '選項 1' }, { id: '234567890', name: '選項 2' }, { id: '345678901', name: '選項 3' }, ], }, });初始畫面，使用者分別在每個輸入框中輸入文字。
使用vm.list.reverse()改變元素順序後，雖然元素被更新，但使用者的輸入被保留，這是因為元素並沒有被重新渲染，而只是部份更新而已。
修改上例，每個 都使用 v-bind 綁定一個屬性 :key 並設定唯一值，目的是確保每個元素的唯一性，當元素更新，例如改變順序時，有可識別唯一性的 key 來確保重新渲染。 ${ index } var vm = new Vue({ el: '#app', delimiters: ['${', '}'], data: { list: [ { id: '123456789', name: '選項 1' }, { id: '234567890', name: '選項 2' }, { id: '345678901', name: '選項 3' }, ], }, });設定 key 值便會重新更新，如下，由於第一個和第三個元素順序改變，因此被重新渲染。
如上所示，使用 vm.list.reverse() 改變元素順序－反序排列，其他操作陣列的 method 還有： push()：新增元素。 pop()：刪除最新加入的元素。 shift()：刪除第一個 (即最舊的) 元素。 unshift()：加入元素至第一個位置。 splice()：加入或移除元素。 sort()：由小至大排序。 reverse()：元素反序排列。 filter()：過濾陣列的元素，並將符合條件的元素傳回成為一個新陣列。 concat()：連接陣列，會返回一個新的陣列。 slice()：切割陣列，會返回一個新的陣列。 顯示過濾 / 排序結果v-for 迭代的資料為使用 computed 或 methods 處理後的結果。例如：顯示數量大於 6 的水果。 ${ item.name } var vm = new Vue({ el: '#app', delimiters: ['${', '}'], data: { frouts: [ { name: 'Apple', count: 10, }, { name: 'Orange', count: 5, }, { name: 'Banana', count: 20, }, ], }, computed: { filteredFrouts: function() { return this.frouts.filter(function(item) { return item.count > 6; }); }, }, });
v-for 的優先權高於 v-if，因此當兩者皆出現在同一個元素上時，v-if 會隨著 v-for 重覆執行數次。如下所示，v-if 會執行 10 次，每次都會判斷 n 除以 2 的餘數是否為 1，若為 1 則顯示，否則就隱藏。 ${ n }
注意，v-for 的個數範圍判斷條件成立後，才會輪到 v-if 來判斷顯示與否。這是什麼意思呢？來看下一個例子就知道了。 如下所示，這裡同時出現了 v-for、v-if 和 v-else 三個指令。在這個例子中，我們試圖印出 list 陣列的元素內容，而目前 list 是空陣列，沒有任何項目可顯示。因此，當 v-for 在判斷 item in list 時，發現條件不成立，就不去做 v-if 和 v-else 判斷了，導致原本沒有元素印出時應該要提示的「Nothing could show.」都沒有出現 :( ${ item.name } Nothing could show. new Vue({ el: '#app', delimiters: ['${', '}'], data: { list: [], }, });看完整範例與 Demo。 解法如下，讓 v-for 來判斷 list 是否有內容的狀況，v-if 只要負責處理項目為 0 個的情況即可。 ${ item.name } Nothing could show.看完整範例與 Demo。 總結，由於 v-for 優先權較高，當 v-for 執行完條件判斷後，若條件不成立，則後面的 v-if 也不會執行，接著忽略了其後的 v-else。 以上參考自 List Rendering。 Tweet 相關文章找不到相關文章 ╮(╯_╰)╭ 想看相似主題的文章？歡迎告訴我 (♡˙︶˙♡) 最新文章
利用 Cypress 和 Sentry 測試前端效能
11 Jul 2023
利用 Sentry 進行效能監控
29 Jun 2023
利用 Firebase 部署微前端專案 (Deploy and Host Micro Frontends Using Firebase)
06 Jun 2023
vue.js
vue.js directives
|
【本文地址】
今日新闻 |
推荐新闻 |